<template>
    <div>
        <global-tables
            @changePage="handleChangePage"
            :total="total"
            @handleAllSelect="handleAllSelect"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.pageindex"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div></div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="用户名" prop="Account">
                                <i-input v-model="formItem.Account" placeholder="请输入用户名"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="姓名" prop="RealName">
                                <i-input v-model="formItem.RealName" placeholder="请输入姓名"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="类别" prop="Type">
                                <RadioGroup v-model="formItem.Type">
                                    <Radio :label="1">医生</Radio>
                                    <Radio :label="2">护士</Radio>
                                    <Radio :label="3">前台</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="科室" prop="DepartmentID">
                                <Cascader :data="DepartList" v-model="formItem.DepartmentID"></Cascader>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="手机" prop="Mobile">
                                <i-input v-model="formItem.Mobile" placeholder="请输入手机"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="性别" prop="Gender">
                                <RadioGroup v-model="formItem.Gender">
                                    <Radio :label="1">男</Radio>
                                    <Radio :label="0">女</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="备注">
                                <i-input type="textarea" v-model="formItem.Remark" placeholder="请输入备注"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 门店列表
 */
import { getUserTablesList, getClinicList, addUserTablesItem, getUserItemInfo, loginSwitch, getAllDepart } from './service';
import GlobalTables from '@/components/GlobalTables';
import { setTimeout } from 'timers';
export default {
    name: 'OrganizationShop',
    components: {
        GlobalTables
    },
    data() {
        const validateDepartID = (rule, value, callback) => {
            setTimeout(() => {
                if (this.DepartID === '') {
                    callback(new Error('请选择科室'));
                } else {
                    callback();
                }
            }, 300);
        };
        const validateDepartmentID = (rule, value, callback) => {
            setTimeout(() => {
                if (!this.formItem.DepartmentID || this.formItem.DepartmentID === '') {
                    callback(new Error('请选择诊室'));
                } else {
                    callback();
                }
            }, 300);
        };
        return {
            allSelectArr: null,
            DepartmentID: '',
            isAddBtn: false,
            isProhibit: false,
            DepartID: [],
            isEdit: false,
            isModal: false,
            ModalTitle: '新建门店',
            itemId: 0,
            DepartList: [],
            clinicList: [],
            loading: true,
            formItem: this.initFormItem(),
            ruleValidate: {
                Account: [
                    {
                        required: true,
                        message: '请输入内容',
                        trigger: 'change'
                    }
                ],
                DepartID: [
                    {
                        required: true,
                        validator: validateDepartID,
                        trigger: 'change'
                    }
                ],
                DepartmentID: [
                    {
                        required: true,
                        validator: validateDepartmentID,
                        trigger: 'change'
                    }
                ]
            },
            total: 0,
            list: [],
            search: {
                shopid: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '用户名',
                    width: 150,
                    key: 'Account'
                },
                {
                    title: '姓名',
                    width: 120,
                    key: 'RealName'
                },
                {
                    title: '性别',
                    width: 80,
                    key: 'Gender'
                },
                {
                    title: '联系电话',
                    width: 130,
                    key: 'Mobile'
                },
                {
                    title: '科室名称',
                    width: 100,
                    key: 'DepName'
                },
                {
                    title: '职位',
                    width: 100,
                    key: 'Type'
                },

                {
                    title: '允许登录',
                    width: 100,
                    render: (h, params) => {
                        return h(
                            'i-switch',
                            {
                                props: {
                                    type: 'primary',
                                    value: params.row.AllowLogin //控制开关的打开或关闭状态，官网文档属性是value
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    'on-change': () => {
                                        loginSwitch({
                                            uid: params.row.ID
                                        }).then(res => {
                                            if (res.state == 'success') {
                                                this.$Message.success('操作成功');
                                                this.getUserTablesList();
                                            } else {
                                                this.$Message.error(res.message);
                                            }
                                        });
                                    }
                                }
                            },
                            [
                                h('span', {
                                    slot: 'open',
                                    domProps: {
                                        innerHTML: '是'
                                    }
                                }),
                                h('span', {
                                    slot: 'close',
                                    domProps: {
                                        innerHTML: '否'
                                    }
                                })
                            ]
                        );
                    }
                },
                {
                    title: '登录总数',
                    width: 120,
                    key: 'LogOnCount'
                },
                {
                    width: 200,
                    title: '最后登录时间',
                    render: (h, params) => {
                        return h('div', [h('span', {}, params.row.LastVisitTime.substring(0, 10))]);
                    }
                },
                {
                    title: '创建人',
                    width: 120,
                    key: 'Creator'
                },

                {
                    title: '创建时间',
                    width: 200,
                    render: (h, params) => {
                        return h('div', [h('span', {}, params.row.CreateTime.substring(0, 10))]);
                    }
                },
                {
                    title: '操作',
                    width: 100,
                    fixed: 'right',
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(params.row, 'edit');
                                        }
                                    }
                                },
                                '编辑'
                            )
                        ]);
                    }
                }
            ]
        };
    },
    mounted() {
        this.search.shopid = this.$route.params.id;
        this.getTablesListData();
        getAllDepart({
            shopid: this.search.shopid
        }).then(res => {
            this.DepartList = res.data;
            this.DepartList = JSON.parse(
                JSON.stringify(this.DepartList)
                    .replace(/"ID"/g, '"value"')
                    .replace(/"DepName"/g, '"label"')
                    .replace(/"Children"/g, '"children"')
            );
        });
    },
    methods: {
        // 科室选择
        handleChangeSelect(value) {
            getClinicList({
                parentid: value
            }).then(res => {
                this.clinicList = res.data;
            });
        },
        /* 表格搜索 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 提交 */
        handleSubmit(name) {
            const data = { ...this.formItem, ID: this.itemId };
            data.CompanyID = this.$route.params.comId;
            data.ShopID = this.$route.params.id;
            data.DepartmentID = this.formItem.DepartmentID[1];
            data.Gender == 1 ? true : false;
            this.$refs[name].validate(valid => {
                if (valid) {
                    addUserTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getUserTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = '新建用户';
            this.formItem = this.initFormItem();
            if (type == 'edit' || type == 'add') {
                this.itemId = 0;
                this.isModal = true;
                if (type == 'edit') {
                    this.ModalTitle = '修改用户';

                    getUserItemInfo({
                        id: item.ID
                    }).then(res => {
                        for (let data in this.DepartList) {
                            for (let dataChildren in this.DepartList[data].children) {
                                if (this.DepartList[data].children[dataChildren].value == res.data.DepartmentID) {
                                    this.formItem.DepartmentID[0] = this.DepartList[data].value;
                                    this.formItem.DepartmentID[1] = res.data.DepartmentID;
                                }
                            }
                        }
                        this.itemId = item.ID;
                        this.formItem = {
                            ...this.formItem,
                            Account: res.data.Account,
                            RealName: res.data.RealName,
                            Mobile: res.data.Mobile,
                            Remark: res.data.Remark,
                            Type: parseInt(res.data.Type),
                            Gender: res.data.Gender ? 1 : 0
                        };
                        this.formItem.DepartmentID = JSON.parse(JSON.stringify(this.formItem.DepartmentID));
                    });
                }
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                Account: '',
                DepartmentID: [],
                RealName: '',
                Mobile: '',
                Gender: 1,
                Type: 1
            };
        }
    }
};
</script>

<style>
</style>
